import { HeaderNav,PostCard } from "../home";
import { useLocation } from 'react-router-dom';
import { Avatar,Image, Button } from "antd";
import styles from "./post.module.css"
import { forumUserSelect } from "../../api/post";
import { useEffect, useState } from "react";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import {pageByPostId} from "../../api/comment";


function Post(){
    let locale = useLocation ();
    // 帖子内容
    let postList = locale.state;
    console.log(postList.postId);
    
    const [comment, setComment] = useState<any[]>([]);
    const [post, setPost] = useState<any>({});
    useEffect(() => {

        const getList = async () => {
            const { data } = await forumUserSelect(postList.postId);
            setPost(data);
        }

        const postComment = async () => {
            const { data } = await pageByPostId({postId:postList.postId,page:1,pageSize:10});
            setComment(data);
        }

        postComment();
        getList();
    }, [postList.postId])

    if (!post[0]){
        return <div>加载中...</div>
    }

    return (
        <div className="bodyContent">
            {/* 导航栏 */}
            <HeaderNav title="轻奢贴吧"/>
            
            {/* 帖子内容以及 */}
            <PostBody data={post[0]} />

            {/* 评论区 */}
            <Comment />

            {/* 评论区域 */}
            <CommentArea data={comment}/>

            {/* 底部信息栏 */}
            <BottomBar />
        </div>
    )
}

function PostBody( {data} : {data: any } ){
    const imgUrl = process.env.PUBLIC_UPLOAD_URL
    dayjs.extend(relativeTime);
    dayjs.locale('zh-cn');

    return (
        <div className={styles.postBody}>
            {/* 贴吧详情 */}
            <div className={styles.postForum}>
                <div style={{display:'flex',gap: '10px'}}>
                    <div className={styles.forumAvatar}>
                        <img src={imgUrl + data.forum.avatar} alt="" />
                    </div>
                    <div className={styles.forumInfo}>
                        <p style={{fontSize: '30px', fontWeight: 'bold'}}>{data.forum.forumName}</p>
                        <p>简介：{data.forum.introduction}</p>
                    </div>
                </div>
                {/* <div>
                    <Button  ghost style={{fontSize:'20px',padding:'15px 20px'}}>关注贴吧</Button>
                </div> */}
            </div>

            {/* 帖子内容 */}
            <div className={styles.postContent}>
                <div className = {styles.witerInfo}>
                    <div style={{display:'flex',gap: '10px',fontSize: '18px',alignItems:'center'}}>
                        <Avatar size={60} src={imgUrl + data.user.avatar}></Avatar>
                        <div style={{display:'flex',gap: '10px'}}>
                            <p>{data.user.nickname}</p>
                            <p>{data.user.gender == '1' ? '男' : '女'}</p>
                        </div>
                        <p>{dayjs(data.createTime).fromNow()}</p>
                    </div>
                    <div>
                        <p>{data.forumName}</p>
                        <p>{data.category}</p>
                    </div>
                </div>
                <div className={styles.postCard}>
                    <p style={{fontSize: '20px',fontWeight: 'bold'}}>{ data.postTitle }</p>
                    <div className={styles.postText} dangerouslySetInnerHTML={{ __html: data.postContent }}>
                    </div>
                    <div className={styles.postImages}>
                        {JSON.parse(data.postImages).map((res: string, index: number) => (
                            <Image style={{objectFit: 'cover'}} key={index} src={imgUrl + res} width={300} height={300}  ></Image>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    )
}

// 评论
function Comment() {
    return (
        <div className={styles.Comment}>
            <div className={styles.commentCard}>收藏</div>
            <div className={styles.commentCard}>评论</div>
            <div className={styles.commentCard}>点赞</div>
        </div>
    )   
}

// 评论区
function CommentArea({data} : { data : any }) {

    const imgUrl = process.env.PUBLIC_UPLOAD_URL
    console.log(data);
    return (
        <div>
            {data.map((res: any, index: number) => (
                <div key={res.commentId} className = {styles.commentUserCard}>
                    <div>
                        <div style={{display:'flex',gap: '10px',alignItems:'center'}}>
                            <Avatar src = {imgUrl + res.avatar}></Avatar>
                            <p>{res.nickname}</p>
                            <p>{res.gender == '1' ? '男' : '女'}</p>
                        </div>
                        <div>
                            
                        </div>
                    </div>
                    <div>{res.commentComment}</div>
                </div>
            ))}
        </div>
    )
}

function BottomBar() {
    return (
        <div className={styles.bottomBar}>
            
        </div>
    )
}

export default Post;